<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>设备列表</title>
		
		<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
		
		<script type="text/javascript" src="./js/jquery.js"></script>
		<script src="./mqtt/websocket/js/mqttws31.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		
		<style>
			.popupContent{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: flex-start;
			}
			.popupContent_1{
				display: flex;
				width: 40%;
				text-align: right;
				align-items: center;
				justify-content: flex-end;
				height: 3rem;
			}
			.popupContent_2{
				display: flex;
				width: 60%;
				text-align: left;
				align-items: center;
				height: 3rem;
			}
			.content>.block>div:nth-child(1){
				width: 50%;
			}
			.content>.block>div:nth-child(2){
				width: 20%;
			}
		</style>
		
	</head>

	<body>
		<header id="header" >
			<select id="">
				<option>所有设备</option>
				<option>我的分享</option>
				<option>分享给我的</option>
				<option>我的分组1</option>
				<option class="greenColor">管理分组</option>
			</select>
			<span style="right: 2rem;position: absolute;font-size: 2rem;" onclick="$('#popupDevice').css('visibility','visible')">+</span>
				
		</header>
		
		<div class="popupMain" id="popupDevice">
			<div class="popup">
				<div class="popupTitle">添加设备</div>
				<div class="popupContent">
					<div class="popupContent_1">设备名：</div>
					<div class="popupContent_2"><input  id="deviceName"/></div>
					<div class="popupContent_1">设备id：</div>
					<div class="popupContent_2"><input id="deviceId"/></div>
				</div>
				<div class="popupFooter">
					<button onclick="save()">提交</button>
					<button onclick="$(this).parent().parent().parent().css('visibility','hidden')">关闭</button>
				</div>
			</div>
		</div>
		
		<div class="content">
			<!--
			<div class="block" onclick="window.location.href='sheBei.html'">
				<div>智能插座1</div>
				<div class="greenColor">正常</div>
			</div>
			
			<div class="block" onclick="listSheBei()">
				<div>智能插座2</div>
				<div class="redColor">损坏</div>
			</div>
			<div class="block">
				<div>智能插座3</div>
				<div class="grayColor">未连接</div>
			</div>
			-->
		</div>
		<div class="footer" >
			<div class="block">
				<div>设备</div>
			</div>
			<div class="block">
				<div>场景</div>
			</div>
			<div class="block">
				<div>我的</div>
			</div>
		</div>
		<script type="application/javascript">
			
			function save(){
				if($('#deviceName').val()==""){
					alert("设备名不能为空！");
					$('#deviceName').focus();	
					return;
				}
				if($('#deviceId').val()==""){
					alert("设备id不能为空！");
					$('#deviceId').focus();	
					return;
				}
				if(checkDeviceName()){
					alert("设备名已存在！");
					$('#deviceName').focus();	
					return;
				}
				if(checkDeviceId()){
					alert("设备id已存在！");
					$('#deviceId').focus();
					return;
				}
				var sql="insert into device values('"+$('#deviceId').val()+"','"+$('#deviceName').val()+"','111')";
				executeSql(sql,function(data){
					if(data.result==1){
						alert("成功");
						$("#popupDevice").css('visibility','hidden');
						listSheBei();
					}
				});
			}
			
			function checkDeviceName(){
				var sql="select * from device where name='"+$("#deviceName").val()+"'";
				var ifRepeat=false;
				listSql(sql,function(data){
					if(data.length>0){
						ifRepeat=true;
					}
				},false);	
				return ifRepeat;
			}
			
			function checkDeviceId(){
				var sql="select * from device where id='"+$("#deviceId").val()+"'";
				var ifRepeat=false;
				listSql(sql,function(data){
					if(data.length>0){
						ifRepeat=true;
					}
				},false);	
				return ifRepeat;
			}
			
			function listSheBei(){
				var sql="select * from device";
				var ids=[];
                var html="";
				listSql(sql,function(data){
					//$(".content").html("");
					console.log(data);
					//data=JSON.parse(data); 
					
                    for(var i=0;i<data.length;i++){
                        var obj=data[i];
                        var status='<div class="grayColor" id="status'+obj.id+'">未连接</div>'
                        
                        html+='<div class="block" >'+
                            '	<div>'+obj.name+'</div>'+
                            status+
                            '		<div><button class="button" onclick="window.location.href=\'device.html?id='+obj.id+'\'">详情</button>'+
                            '		<button class="button" onclick="delDevice(\''+obj.id+'\')">删除</button></div>'+
                            '</div>';
                            
                            connectMqtt(obj.id);
                    }
                    
                    $(".content").html(html);
					//console.log("html:"+html);
					//alert(123);
				});	
			}
			
			
			function delDevice(id){
				if(confirm("是否删除")){
					var data={};
					data.id=id;
					$.ajax({
						url:'common/delDevice',
						type:"post",
						async:true,
						data:data,
						success: function (data) {
							console.log("result:"+data);
							if(data==1){
								alert("成功！");
								listSheBei();
							}
							if(data==0){
								alert("失败！");
								listSheBei();
							}
							$("div[onclick*='delJob']").removeAttr("disabled");
						},
						error: function (error) {
							alert(JSON.stringify(error));
						}
					})
				}
			}
			
			
			function scaned(t, r, f) {
				console.log(r);
				alert(r);
				var sql="select * from sheBei where id='"+r+"'";
				listSql(sql,function(data){
					
				});
			}
			
			
			
			function connectMqtt(deviceId){
		      var host = "148.70.214.205";    
		      var port = "61614";
		      var clientId = uuid16(); 
		      var user = "admin";
		      var password = "admin";
		      
		      var destination = deviceId;
		
		    
		      var client = new Messaging.Client(host, Number(port), clientId);
		
		      //client.onConnect = onConnect;
		  
		      client.onMessageArrived =function(message){
                  //console.log(message);
                  console.log(message.payloadString);
                  var msg=message.payloadString;
                  msg=JSON.parse(msg);
                  if(msg.id){
                    if(msg.status==1){
                        $("#status"+msg.id).html("正常");
                        $("#status"+msg.id).attr("class","greenColor");
                    }
                  }
		      };
		      client.onConnectionLost = function(responseObject){
                console.log("ConnectionLost");
                console.log(responseObject);
		      };
		
		      client.connect({
		        userName:user,
		        password:password, 
		        onSuccess:function(){
                    console.log("connectSuccess");
                    client.subscribe(destination);
		        }, 
		        onFailure:function(p){
                    console.log(p);
		        	console.log("connectFailure");
		        }
		      }); 
		    }
			
			
			
			
			
			
			
			
			
			
			
			
			listSheBei();
			// setInterval(function(){
			// 	listSheBei();
			// },5000);
			
		</script>
	</body>
</html>